<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 音频 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-button type="primary" class="handle-del mr10" @click="addDialog">新增音频</el-button>
            <div class="handle-box">
                <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="delAllSelection">批量删除
                </el-button>
                <el-input v-model="query.keyword" placeholder="输入音频名称" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column label="音频封面" width="100">
                    <template slot-scope="scope">
                        <img :src="scope.row.cover" @error="tabErrorPicture(scope.row.id)" alt="" class="info-image" />
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="音频名称"></el-table-column>
                <el-table-column prop="description" label="音频描述"></el-table-column>
                <el-table-column label="免费/付费">
                    <template slot-scope="scope">
                        <span style="color: #e65c5c">{{ scope.row.price == 0 ? '免费' : '¥ ' + scope.row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="f_view" label="浏览量"></el-table-column>
                <el-table-column prop="f_sales" label="订阅量"></el-table-column>
                <el-table-column prop="f_favorites" label="收藏量"></el-table-column>
                <el-table-column label="操作" width="300" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="playAudio(scope.row.audio.path+scope.row.audio.name,scope.row.audio.bucket)" type="primary" size="mini">预览</el-button>
                        <el-button @click="edit(scope.row.id, scope.row)" type="success" size="mini">编辑</el-button>
                        <el-button @click="putOn(scope.row.id, scope.row.status)" type="warning" size="mini">{{ scope.row.status == 0 ? '上架' : '下架' }}</el-button>
                        <el-button @click="deleteRow(scope.row.id, scope.$index)" type="danger" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.page"
                    :page-size="query.rows" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
        <!-- 新增音频弹出框 -->
        <el-dialog title="新增/编辑音频" @close="cancel" :visible.sync="showDialog" width="50%">
            <el-form ref="form" :rules="rules" :model="form" label-width="125px">
                <el-form-item label="音频名称" prop="title">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="音频描述" prop="description">
                    <el-input type="textarea" :rows="2" v-model="form.description"> </el-input>
                </el-form-item>
                <el-form-item label="音频封面">
                    <div class="avatar-uploader" @click="showUploadImage('audiofm')">
						<img v-if="form.cover" :src="form.cover" class="avatar" height="200px">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</div>
					<div class="el-upload__tip">封面建议尺寸：800*600px，支持jpg、png</div>
                </el-form-item>
                <el-form-item label="分类" prop="category_id">
                    <el-select v-model="form.category_id" clearable placeholder="请选择视频分类" v-if="!category_length"> 
                        <!-- <el-option v-for="item in options" :key="item.id" :label="item.title" :value="item.id"> </el-option> -->
						<el-option-group v-for="group in options" :key="group.id" :label="group.title">
							<el-option v-for="item in group._child" :key="item.id" :label="item.title" :value="item.id">
							</el-option>
						</el-option-group>
					</el-select>
					
					<a href="/classification" class="data-overview-item__num" v-if="category_length">暂无分类，请前往创建</a>
					
                </el-form-item>
                <el-form-item label="会员专享">
                    <el-checkbox :true-label="1" :false-label="0" v-model="form.only_member">勾选后仅会员可订阅</el-checkbox>
                </el-form-item>
                <el-form-item label="允许单独售卖">
                    <el-radio-group v-model="form.alone_sale">
                        <el-radio :label="1">允许</el-radio>
                        <el-radio :label="0">禁止</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否付费">
                    <el-radio-group v-model="form.expense" @change="course_price">
                        <el-radio :label="0">免费</el-radio>
                        <el-radio :label="1">付费</el-radio>
                    </el-radio-group>
                    <div v-if="form.expense == 1">
                        <el-form-item label="商品价格">
                            <el-input v-model="form.price" class="showPay"></el-input><span>元</span>
                        </el-form-item>
                        <el-form-item label="划线价格">
                            <el-input v-model="form.marking_price" class="showPay"></el-input><span>元</span>
                        </el-form-item>
                    </div>
                </el-form-item>
                <el-form-item label="返还积分">
                    <el-input v-model="form.score"></el-input>
                </el-form-item>
                <el-form-item label="试听设置">
                    <el-radio-group v-model="form.try_type" @change="try_audio_set">
                        <el-radio label="time">试听时间</el-radio>
                        <el-radio label="custom">自定义片段</el-radio>
                        <el-radio label="none">禁止试听</el-radio>
                    </el-radio-group>
                    <div v-if="form.try_type == 'time'">
                        <el-input-number v-model="form.try_time" controls-position="right" :min="0"></el-input-number>
                        <span style="margin-left: 10px">秒</span>
                    </div>
                    <div v-if="form.try_type == 'custom'">
                        <el-form-item label="自定义音频上传">
                            <el-upload :action="audioUrl" :on-success="customHandleVideo"
                                :on-remove="customHandleVideoRemove" :file-list="customAudioList" accept=".mp3">
                                <el-button size="small" type="primary">选择音频</el-button>
                                <div slot="tip" class="el-upload__tip">支持格式mp3</div>
                            </el-upload>
                        </el-form-item>
                    </div>
                </el-form-item>
                <el-form-item label="完整音频上传">
                    <!-- <el-upload :action="audioUrl" :on-success="handleVideo" :on-remove="handleVideoRemove"
                        :file-list="audioList" accept=".mp3">
                        <el-button size="small" type="primary">选择音频</el-button>
                        <div slot="tip" class="el-upload__tip">支持格式mp3</div>
                    </el-upload> -->
                    <el-button size="small" type="primary" @click="showUploadAudio('wzaudio')">选择音频</el-button>
                    <div>
                        <span @click="playAudio(form.audio.path+form.audio.name,form.audio.bucket)">
						<img v-if="form.audio" :src="form.audio.src" height="100px"/>{{form.audio?form.audio.name:""}}</span>
					</div>
                </el-form-item>
                <el-form-item label="订阅后自定义内容">
                    <quill-editor v-model="form.custom_desc" :options="editorOption" ref="myQuillEditor"></quill-editor>
                </el-form-item>
                <el-form-item label="完整内容">
                    <quill-editor v-model="form.content" :options="editorOption2" ref="myQuillEditor2"></quill-editor>
                </el-form-item>
                <el-form-item label="选择讲师" prop="teacher_id">
                    <el-button @click="chooseLecturer" type="primary" size="mini">选择讲师</el-button>
                    <el-table :data="selectRowData" v-if="selectRowData.length !== 0" class="table" ref="multipleTable"
                        header-cell-class-name="table-header">
                        <el-table-column label="讲师图片">
                            <template slot-scope="scope">
                                <img :src="scope.row.cover" alt="" class="info-image" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="讲师姓名"></el-table-column>
                        <el-table-column prop="description" label="讲师描述"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <el-button @click="del_lecturer" type="danger" size="mini">移除讲师</el-button>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="自定义浏览量">
                    <el-input v-model="form.f_view"></el-input>
                </el-form-item>
                <el-form-item label="自定义订阅量">
                    <el-input v-model="form.f_sales"></el-input>
                </el-form-item>
                <el-form-item label="自定义收藏量">
                    <el-input v-model="form.f_favorites"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <el-form-item label="状态设置">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">立即上架</el-radio>
                        <el-radio :label="0">暂不上架</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save('form')">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 讲师弹框 -->
        <el-dialog width="36%" title="选择讲师" @close="exit" :visible.sync="innerVisible" append-to-body>
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="输入讲师姓名" class="handle-input mr10"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="lecturerSearch">搜索</el-button>
                </el-form-item>
                <el-table :data="chooseLecturerTableData" @row-click="chooseRow" class="chooseLecturerTable"
                    ref="multipleTable" header-cell-class-name="table-header">
                    <el-table-column label="讲师图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.cover" alt="" class="info-image" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="讲师姓名"></el-table-column>
                    <el-table-column prop="description" label="讲师描述"></el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background layout="total, prev, pager, next" :current-page="query.page"
                        :page-size="query.rows" :total="lecturerListTotal" @current-change="lecturerPageChange">
                    </el-pagination>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exit">关 闭</el-button>
            </span>
        </el-dialog>
        <!-- 预览弹出框 -->
        <el-dialog :title="title" :visible.sync="previewDialogVisible" width="30%">
            <div class="preview">
                <audio :src="preview_url"  controls="controls"></audio>
                <!-- <h3>微信扫码预览</h3>
                <qriously class="qrCode" :value="preview_url" :size="200" :backgroundAlpha="1" />
                <el-input v-model="preview_url">
                    <template slot="prepend">SPA版url</template>
                    <el-button v-clipboard="copy_value" v-clipboard:success="clipboardSuccessHandler"
                        v-clipboard:error="clipboardErrorHandler" slot="append">复制</el-button>
                </el-input> -->
            </div>
        </el-dialog>
        <el-dialog title="音频" :visible.sync="audioplayshow" width="50%" :before-close="handleClose" append-to-body>
			<div id="J_prismPlayer"></div>
		</el-dialog>
        <uploadimage ref="uploadimagecom" v-on:childByImageValue="childByImageValue"></uploadimage>
        <uploadaudio ref="uploadaudiocom" v-on:childByAudioValue="childByAudioValue"></uploadaudio>
    </div>
</template>

<script>
// 自定义工具栏配置
const toolbarOptions = [
	["bold", "italic", "underline", "strike"], // toggled buttons
	["blockquote", "code-block"],

	[{ header: 1 }, { header: 2 }], // custom button values
	[{ list: "ordered" }, { list: "bullet" }],
	[{ script: "sub" }, { script: "super" }], // superscript/subscript
	[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
	[{ direction: "rtl" }], // text direction

	[{ size: ["small", false, "large", "huge"] }], // custom dropdown
	[{ header: [1, 2, 3, 4, 5, 6, false] }],

	[{ color: [] }, { background: [] }], // dropdown with defaults from theme
	[{ font: [] }],
	[{ align: [] }],
	["link", "image", "video"], // 对于图片上传这是重点
	["clean"], // remove formatting button
];
import uploadimage from '@/components/common/uploadimage.vue';
import uploadaudio from '@/components/common/uploadaudio.vue';
import showfileMixin from '@/mixin/showossfile.js';
import { classifyListData, lecturerListData, videoListData, addVideoData, delVideoData } from '../../api/index';
export default {
    name: 'lecturer',
    components: {
		uploadimage,
        uploadaudio
	},
    mixins: [showfileMixin],
    data() {
        return {
			category_length:false,
            query: {
                type: 'audio',
                status: 0,
                page: 1,
                rows: 4,
                keyword: ''
            },
            //imgUrl: 'http://api.xuejing.pro/admin/file/image',
            //audioUrl: 'http://api.xuejing.pro/admin/file/audio',
            //pictureList: [],
            customAudioList: [],
            audioList: [],
            title: '',
            preview_url: '',
            copy_value: '',
            form: {
                type: '',
                id: '',
                teacher_id: '',
                title: '',
                description: '',
                cover: '',
                category_id: '',
                only_member: '',
                alone_sale: '',
                expense: '',
                price: '',
                marking_price: '',
                score: '',
                try_type: '',
                try_time: '',
                try_audio: '',
                audio: '',
                custom_desc: '',
                content: '',
                f_view: '',
                f_sales: '',
                f_favorites: '',
                sort: '',
                status: 1
            },
            rules: {
                title: [
                    { required: true, message: "请输入音频信息", trigger: "blur" },
                    { min: 1, max: 30, message: "长度在1到30个字符", trigger: "blur" }
                ],
                // teacher_id:[{required:true,message:"请选择讲师",trigger:"blur"}],
				category_id:[{required:true,message:"请选择分类",trigger:"change"}]
            },
            options: [],
            // options_child: [],
            tableData: [],
            multipleSelection: [],
            delList: [],
            chooseLecturerTableData: [],
            selectRowData: [],
            showDialog: false,
            innerVisible: false,
            previewDialogVisible: false,
            pageTotal: 0,
            lecturerListTotal: 0,
            // 富文本自定义配置项
			editorOption: {
				modules: {
					toolbar: {
						container: toolbarOptions, // 工具栏
						handlers: {
							// 此处开始改写自带的图片上传
							image: (value) => {
								this.$refs.uploadimagecom.dialogVisible = true;
								this.action = "form_custom_desc_image";
							}
						},
					},
					// 调整图片大小
					imageResize: {
						displayStyles: {
							backgroundColor: 'black',
							border: 'none',
							color: 'white'
						},
						modules: ['Resize', 'DisplaySize', 'Toolbar']
					}
				},
			},
			// 富文本自定义配置项
			editorOption2: {
				modules: {
					toolbar: {
						container: toolbarOptions, // 工具栏
						handlers: {
							// 此处开始改写自带的图片上传
							image: (value) => {
								this.$refs.uploadimagecom.dialogVisible = true;
								this.action = "form_content_image";
							}
						},
					},
					// 调整图片大小
					imageResize: {
						displayStyles: {
							backgroundColor: 'black',
							border: 'none',
							color: 'white'
						},
						modules: ['Resize', 'DisplaySize', 'Toolbar']
					}
				},
			},
            audioplayshow:false,
			player:'',
            errorProduct: require('@/assets/img/noProduct.jpg'), 
        };
    },
    created() {
        this.getData();
    },
    methods: {
        tabErrorPicture(id){    // 表格图文封面默认展示图
            let i = this.tableData.findIndex(v => v.id == id);
			this.tableData[i].cover = this.errorProduct;
        },
        getData() {
            videoListData(this.query).then((res) => {
                this.tableData = res.data.list;
                this.pageTotal = res.data.count;
            });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //批量删除
        delAllSelection() {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                const length = this.multipleSelection.length;
                let str = '';
                let strID = '';
                this.delList = this.delList.concat(this.multipleSelection);
                console.log(this.delList);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].title + ' ';
                    strID += this.multipleSelection[i].id + ',';
                }
                delVideoData({ id: strID.substring(0, strID.lastIndexOf(',')) }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success(`删除了${str}`);
                        this.multipleSelection = [];
                        this.getData();
                        //location.reload();
                    }
                });
            });
        },
        // 搜索
        handleSearch() {
            this.$set(this.query);
            this.getData();
        },
        // 讲师搜索
        lecturerSearch() {
            this.chooseLecturer();
        },
        // 分页
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        },
        // 讲师分页
        lecturerPageChange(val) {
            this.$set(this.query, 'page', val);
            this.chooseLecturer();
        },
        // // 封面上传
        // handleCover(res) {
        //     if (res.code == 1) {
        //         this.form.cover = res.data.attachment;
        //     }
        // },
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        course_price(v) {
            if (v == 0) {
                this.form.price = '';
                this.form.marking_price = '';
            }
        },
        try_audio_set(v) {
            if (v == 'time') {
                this.form.try_audio = '';
            } else if (v == 'custom') {
                this.form.try_time = '';
            } else {
                this.form.try_time = '';
                this.form.try_audio = '';
            }
        },
        // 自定义音频上传
        customHandleVideo(res) {
            if (res.code == 1) {
                this.form.try_audio = res.data.attachment;
            }
        },
        customHandleVideoRemove(file, fileList) {
            // console.log(file, fileList);
        },
        // 完整音频上传
        handleVideo(res) {
            if (res.code == 1) {
                this.form.audio = res.data.attachment;
            }
        },
        handleVideoRemove(file, fileList) {
            // console.log(file, fileList);
        },
        //新增
        addDialog() {
            this.showDialog = true;
            this.selectRowData = [];
            classifyListData().then((res) => {
                this.options = res.data.list;
			
				if(res.data.list.length > 0){
					this.category_length = false;
				}else{
					this.category_length = true;
				}
				
				
                // res.data.list.forEach((item) => {
                //     if (item._child) {
                //         console.log(item);
                //         this.options_child.push(item);
                //         console.log(this.options_child);
                //     }
                // });
            });
        },
        chooseLecturer() {
            this.innerVisible = true;
            lecturerListData(this.query).then((res) => {
                this.chooseLecturerTableData = res.data.list;
                this.lecturerListTotal = res.data.count;
            });
        },
        chooseRow(row) {
            this.selectRowData = [];
            this.selectRowData.push(row);
            this.form.teacher_id = row.id;
            this.innerVisible = false;
        },
        del_lecturer() {
            this.selectRowData = [];
            this.form.teacher_id = '';
        },
        // 预览
        preview(audio) {
            console.log(`https://${audio.bucket}.oss-cn-beijing.aliyuncs.com/${audio.path}${audio.name}`)
            this.previewDialogVisible = true;
            // this.title = title;
            this.copy_value =
                this.preview_url = `https://${audio.bucket}.oss-cn-beijing.aliyuncs.com/${audio.path}${audio.name}`;
        },
        clipboardSuccessHandler({ value, event }) {
            this.$message.success('复制成功');
        },
        clipboardErrorHandler({ value, event }) {
            console.log('复制失败', value);
        },
        //编辑
        edit(id, row) {
            classifyListData().then((res) => {
                this.options = res.data.list;
            });
            this.selectRowData = [];
            this.showDialog = true;
            this.form = row;
            // if ((typeof this.form.audio == 'string') && this.form.audio.constructor == String) {
			// 	this.form.audio = JSON.parse(this.form.audio);
			// }
            if(row.teacher_info){
            this.selectRowData.push(row.teacher_info);}
        },
        //上下架
        putOn(id, status) {
            this.$confirm(`确定${status == 0 ? '上架' : '下架'}吗！`, '提示', {
                type: 'warning'
            }).then(() => {
                addVideoData({ id: id, status: status == 0 ? 1 : 0 }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('成功');
                        this.getData();
                        //location.reload();
                    }
                });
            });
        },
        //删除
        deleteRow(id, index) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                delVideoData({ id: id }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('删除成功');
                        this.tableData.splice(index, 1);
                        this.getData();
                        //location.reload();
                    }
                });
            });
        },
        //取消
        cancel() {
            this.form = {};
            this.pictureList = [];
            this.customAudioList = [];
            this.audioList = [];
            this.showDialog = false;
        },
        //关闭
        exit() {
            this.innerVisible = false;
        },
        //确定
        save(formName) {
            // let formData = new FormData();
            // formData.append('cover', this.cover);
            // formData.append('audio', this.audio);
            // formData.append("form", JSON.stringify(this.form));
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.form.type = 'audio';
                    if(Object.prototype.toString.call(this.form.audio) === '[object Object]'){
                    this.form.audio = JSON.stringify(this.form.audio);
                    }
                    addVideoData(this.form).then((res) => {
                        if (res.code == 1) {
                            this.showDialog = false;
                            this.$message.success('操作成功');
                            setTimeout(() => {
                                this.getData();
                                //location.reload();
                            }, 200);
                        }
                    });
                }else{
                    return false
                }
            })
        },
        showUploadImage(action) { //显示上传组件
			this.$refs.uploadimagecom.dialogVisible = true;
			this.action = action;
		},
        showUploadAudio(action) {
			this.$refs.uploadaudiocom.dialogVisible = true;
			this.action = action;
		},
        //确认按钮传值过来并赋值到form表单上
		childByImageValue: function (childValue) {
			if (this.action == "audiofm") {
				this.form.cover = childValue;
			} else if (this.action == "form_custom_desc_image") {
				let quill = this.$refs.myQuillEditor.quill;
				// 获取光标所在位置
				let length = quill.getSelection().index;
				// 插入图片，res为服务器返回的图片链接地址
				quill.insertEmbed(length, "image", childValue);
				quill.setSelection(length + 1);
			} else if (this.action == "form_content_image") {
				let quill = this.$refs.myQuillEditor2.quill;
				// 获取光标所在位置
				let length = quill.getSelection().index;
				// 插入图片，res为服务器返回的图片链接地址
				quill.insertEmbed(length, "image", childValue);
				quill.setSelection(length + 1);
			}
		},
        childByAudioValue: function (childValue) {
			if (this.action == "wzaudio") {
				this.form.audio = {
					src: '/image/audio.jpg',
					bucket: childValue.bucket,
					path: childValue.path,
					name: childValue.name
				};
			} else if (this.action == "customaudio") {

			}
		},
        async playAudio(path) {
				//let path="audio/admin/25/平面设计/室内设计/6781f56fd516a2be3ccf78de88d6ea81.mp3";
				this.audioplayshow = true;
				let res = await this.getSignatureUrl(path); //bucket默认xuejingres,暂时可以不填写
				var player = new Aliplayer({
					id: 'J_prismPlayer',
					source: res, //播放地址，可以是第三方点播地址，或阿里云点播服务中的播放地址。
					"width": "100%",
					"height": "500px",
					"autoplay": true,
					"isLive": false,
					"rePlay": false,
					"playsinline": true,
					"preload": true,
					"controlBarVisibility": "hover",
					"useH5Prism": true,
					"extraInfo": {
						"crossOrigin": "anonymous"
					},
					"skinLayout": [{
							"name": "bigPlayButton",
							"align": "blabs",
							"x": 30,
							"y": 80
						},
						{
							"name": "H5Loading",
							"align": "cc"
						},
						{
							"name": "errorDisplay",
							"align": "tlabs",
							"x": 0,
							"y": 0
						},
						{
				 		"name": "infoDisplay"
						},
				  {
							"name": "tooltip",
				  	"align": "blabs",
							"x": 0,
							"y": 56
						},
						{
							"name": "thumbnail"
						},
						{
							"name": "controlBar",
							"align": "blabs",
							"x": 0,
							"y": 0,
				  	"children": [{
									"name": "progress",
									"align": "blabs",
									"x": 0,
									"y": 44
								},
								{
									"name": "playButton",
									"align": "tl",
									"x": 15,
				   		"y": 12
								},
								{
									"name": "timeDisplay",
									"align": "tl",
									"x": 10,
									"y": 7
								},
								{
									"name": "fullScreenButton",
									"align": "tr",
									"x": 10,
									"y": 12
								},
								{
									"name": "subtitle",
									"align": "tr",
									"x": 15,
									"y": 12
								},
								{
									"name": "setting",
									"align": "tr",
									"x": 15,
				 				"y": 12
								},
								{
									"name": "volume",
									"align": "tr",
									"x": 5,
									"y": 10
								},
				  		{
									"name": "snapshot",
									"align": "tr",
									"x": 10,
									"y": 12
								}
							]
						}
					]
				}, function(player) {
					//console.log("The player is created");
					player.play();
				});
				this.player = player;
				
				/* h5截图按钮, 截图成功回调 */
				player.on('snapshoted', function(data) {
					var pictureData = data.paramData.base64
					var downloadElement = document.createElement('a')
					downloadElement.setAttribute('href', pictureData)
					var fileName = 'Aliplayer' + Date.now() + '.png'
					downloadElement.setAttribute('download', fileName)
					downloadElement.click()
					pictureData = null
				});
			},
			handleClose(){
				this.player.dispose();
				this.audioplayshow=false;
			}
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
    float: right;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}

.info-image {
    width: 80px;
    border-radius: 4px;
}

.showPay {
    width: 150px;
    margin-right: 10px;
    margin-bottom: 15px;
}

.chooseLecturerTable {
    cursor: pointer;
}

.preview {
    padding: 30px;
    text-align: center;
}

.preview .qrCode {
    margin: 10px 0;
}
</style>

<style>
.el-upload--text {
    border: 0;
    height: 40px;
    text-align: left;
    overflow: unset;
}

.el-upload__tip {
    margin-top: 0;
}

.el-input-group__append {
    background: #e6a23c;
}

.el-input-group__append span {
    color: #fff;
}

.ql-container {
    height: 200px;
}

.avatar-uploader {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	width: 375px !important;
	text-align: center;
}

.avatar-uploader:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
}

.avatar {
	width: 100%;
	display: block;
}
</style>


